<template>
  <div id="acceptanceOneEvent-four" class="tabs">
    <div class="title">证照归集列表</div>
    <div class="tabhead">
      <el-form
        ref="form"
        :model="form"
        label-width="80px"
        inline
        size="small"
        style="height: 180px; width: 1492px; margin: 0 auto"
      >
        <el-form-item label="所属区域:">
          <el-select v-model="form.type" placeholder="请选择区划" style="width: 240px">
            <el-option v-for="item in options" :key="item.id" :label="item.label" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属机构:" style="margin-left: 60px">
          <el-input v-model="form.type" placeholder="所属机构" style="width: 240px"></el-input>
        </el-form-item>
        <el-form-item label="实施办证编号:" label-width="122px">
          <el-input v-model="form.type" placeholder="亲输入办证编号" style="width: 262px"></el-input>
        </el-form-item>

        <el-form-item style="margin-left: 42px">
          <el-button type="primary" @click="searchData()">点击搜索</el-button>
          <el-button type="success" @click="searchData()">文书校验</el-button>
        </el-form-item>

        <el-form-item label="申请人:">
          <el-input v-model="form.type" placeholder="请输入申请人名称" style="width: 240px"></el-input>
        </el-form-item>

        <el-form-item label="身份证号:" style="margin-left: 60px">
          <el-input v-model="form.type" placeholder="请输入身份证号" style="width: 240px"></el-input>
        </el-form-item>
        <div class="blok">
          <span
            class="demonstration"
            style="
              font-size: 16px;
              font-family: PingFang SC;
              font-weight: 500;
              line-height: 22px;
              color: #222222;
              opacity: 1;
            "
          >
            登记日期:
          </span>
          <el-date-picker
            style="margin-left: 15px"
            type="dates"
            v-model="value4"
            placeholder="选择一个或多个日期"
          ></el-date-picker>
          <span style="margin-left: 15px">至</span>
          <el-date-picker
            style="margin-left: 15px"
            type="dates"
            v-model="value4"
            placeholder="选择一个或多个日期"
          ></el-date-picker>
        </div>
      </el-form>
      <el-table :data="tableData" border size="mini" :header-cell-style="tabHeader">
        <el-table-column label="排序" width="58px">
          <template slot-scope="scope">
            <span>{{ scope.row.index }}</span>
          </template>
        </el-table-column>
        <el-table-column label="实施清单名称" width="181px">
          <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="办事情形" width="146px">
          <template slot-scope="scope">
            <span>{{ scope.row.banshi }}</span>
          </template>
        </el-table-column>
        <el-table-column label="办证编号" width="134px">
          <template slot-scope="scope">
            <span>{{ scope.row.bianma | ellipsis }}</span>
          </template>
        </el-table-column>
        <el-table-column label="事项类型" width="96px">
          <template slot-scope="scope">
            <span>{{ scope.row.shijian }}</span>
          </template>
        </el-table-column>
        <el-table-column label="申请人" width="108px">
          <template slot-scope="scope">
            <span>{{ scope.row.time }}</span>
          </template>
        </el-table-column>
        <el-table-column label="经办人" width="105px">
          <template slot-scope="scope">
            <span>{{ scope.row.zongchuang }}</span>
          </template>
        </el-table-column>
        <el-table-column label="登记时间" width="177px">
          <template slot-scope="scope">
            <span>{{ scope.row.time }}</span>
          </template>
        </el-table-column>
        <el-table-column label="时限" width="156px">
          <template slot-scope="scope">
            <span>{{ scope.row.time }}</span>
          </template>
        </el-table-column>
        <el-table-column label="办件状态" width="146px">
          <template slot-scope="scope">
            <span>{{ scope.row.zhuangtai }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="235px">
          <template slot-scope="scope">
            <div style="display: flex; padding: 0 20px; box-sizing: border-box">
              <el-button type="primary" @click="del(scope.row.tel)">查看</el-button>
              <el-button type="success" @click="del(scope.row.tel)">接收</el-button>
              <el-button type="warning" @click="del(scope.row.tel)">进度</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="tabpage">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          hide-on-single-page
          :page-size="pageSize"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  import { tabHeader } from '@/config/config';

  export default {
    name: 'acceptanceOneEvent-four',
    data() {
      return {
        value1: '',
        value2: '',
        value3: '',
        value4: '',
        tabHeader: tabHeader,
        total: 20,
        currentPage: 1,
        pageSize: 5,
        tableData: [
          {
            index: '1',
            jigou: '省财政厅',
            name: '小餐饮经营许可证',
            banshi: '是否本人办理...',
            bianma: '10010302932328328',
            time: '24天0时0分',
            shijian: '行政许可',
            zongchuang: '综窗01',
            zhuangtai: '已通过审核'
          },
          {
            index: '2',
            jigou: '省财政厅',
            name: '小餐饮经营许可证',
            banshi: '是否本人办理...',
            bianma: '10010302932328328',
            time: '24天0时0分',
            shijian: '行政许可',
            zongchuang: '综窗01',
            zhuangtai: '已通过审核'
          },
          {
            index: '3',
            jigou: '省财政厅',
            name: '小餐饮经营许可证',
            banshi: '是否本人办理...',
            bianma: '10010302932328328',
            time: '24天0时0分',
            shijian: '行政许可',
            zongchuang: '综窗01',
            zhuangtai: '已通过审核'
          },
          {
            index: '4',
            jigou: '省财政厅',
            name: '小餐饮经营许可证',
            banshi: '是否本人办理...',
            bianma: '10010302932328328',
            time: '24天0时0分',
            shijian: '行政许可',
            zongchuang: '综窗01',
            zhuangtai: '已通过审核'
          },
          {
            index: '5',
            jigou: '省财政厅',
            name: '小餐饮经营许可证',
            banshi: '是否本人办理...',
            bianma: '10010302932328328',
            time: '24天0时0分',
            shijian: '行政许可',
            zongchuang: '综窗01',
            zhuangtai: '已通过审核'
          },
          {
            index: '6',
            jigou: '省财政厅',
            name: '小餐饮经营许可证',
            banshi: '是否本人办理...',
            bianma: '10010302932328328',
            time: '24天0时0分',
            shijian: '行政许可',
            zongchuang: '综窗01',
            zhuangtai: '已通过审核'
          },
          {
            index: '7',
            jigou: '省财政厅',
            name: '小餐饮经营许可证',
            banshi: '是否本人办理...',
            bianma: '10010302932328328',
            time: '24天0时0分',
            shijian: '行政许可',
            zongchuang: '综窗01',
            zhuangtai: '已通过审核'
          },
          {
            index: '8',
            jigou: '省财政厅',
            name: '小餐饮经营许可证',
            banshi: '是否本人办理...',
            bianma: '10010302932328328',
            time: '24天0时0分',
            shijian: '行政许可',
            zongchuang: '综窗01',
            zhuangtai: '已通过审核'
          },
          {
            index: '9',
            jigou: '省财政厅',
            name: '小餐饮经营许可证',
            banshi: '是否本人办理...',
            bianma: '10010302932328328',
            time: '24天0时0分',
            shijian: '行政许可',
            zongchuang: '综窗01',
            zhuangtai: '已通过审核'
          },
          {
            index: '10',
            jigou: '省财政厅',
            name: '小餐饮经营许可证',
            banshi: '是否本人办理...',
            bianma: '10010302932328328',
            time: '24天0时0分',
            shijian: '行政许可',
            zongchuang: '综窗01',
            zhuangtai: '已通过审核'
          }
        ],
        form: {
          nickname: '',
          tel: '',
          userId: '',
          type: ''
        },
        options: [
          { id: 1, label: '团长' },
          { id: 2, label: '团员' }
        ]
      };
    },
    filters: {
      ellipsis(value) {
        if (!value) return '';
        if (value.length > 12) {
          return value.slice(0, 12) + '...';
        }
        return value;
      }
    },
    methods: {
      searchData() {},
      del() {},
      handleCurrentChange(page) {
        console.log(page);
        this.currentPage = page;
      }
    }
  };
</script>

<style lang="scss">
  @import '../../../assets/css/publicList.scss';
  #acceptanceOneEvent-four {
    .el-button {
      width: 150px;
      height: 40px;
      border-radius: 5px;
    }
  }
</style>
